<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>今日生机论坛--管理员后台登录页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" href="../favicon.ico" type="image/gif">

		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

		<style>
			body {
				background: url(../img/backgroundPicture/backgroundPicture01.jpeg) no-repeat;
				background-size: cover;
			}
		</style>

	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-4"></div>
				<div class="col-4 border rounded bg-white shadow-sm p-4" style="transform: translateY(50%);">
					<h4 class="text-center">管理员后台登录页面</h4>
					<form role="form" id="form">
						<div class="form-group">
							<label for="name">用户名</label>
							<input type="text" class="form-control" id="name" placeholder="请输入用户名" name="userName">
						</div>
						<div class="form-group">
							<label for="password">密码</label>
							<input type="password" class="form-control" id="password" placeholder="请输入密码"
								name="userPassword">
						</div>
						<div class="form-group">
							<button type="submit" class="btn btn-primary d-block m-auto">登录</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script>
			$('#form').submit(function(e) {
				// 阻止表单的提交和页面的跳转
				e.preventDefault();
				// 发送用户名和密码给后端判断
				$.ajax({
					url: '/user/login',
					method: "POST",
					data: JSON.stringify(form2Json($("#form").serialize())),
					contentType: "application/json",
					success: function(returnObject) {
						if (returnObject.code == "1") {
							window.location.href = "/user/list";
						} else {
							alert(returnObject.message + ",请重新登录！");
						}
					}
				});
				
			});

			function form2Json(str) {
				var arr = str.split('&');
				var obj = {};
				for (var i = 0; i < arr.length; i++) {
					var bits = arr[i].split('=');
					obj[bits[0]] = bits[1];
				}
				str = '';
				for (key in obj) {
					str += key + '=' + obj[key] + '&';
				}
				str = str.slice(0, str.length - 1);
				return obj;
			}
		</script>
	</body>
</html>
